import React, { useEffect, useState } from 'react'
import { list, getIndex } from '@/api'
import NavTop from '@/components/NavTop'
import Card from '@/components/Card'
import KeepAlive from 'react-activation'
import { Skeleton, List } from 'react-vant'
import { Exchange, ChatO, GoodJobO, Ellipsis } from '@react-vant/icons'
import './index.less'

const Index = () => {
  const [tab, SetTab] = useState({})

  const [cards, setCards] = useState([])

  const [skeleton, setSkeleton] = useState(true)

  const [errload, setErr] = useState(false)

  const getList = async () => {
    let res = await list()
    SetTab(res.data)
  }

  const getHome = async () => {
    let res = await getIndex({
      containerid: '102803',
      openApp: 0
    })
    setCards(res.data.cards)
  }

  // 骨架屏
  const wbSkeleton = () => {
    let s = [...Array.from({ length: 10 }).keys()]
    return (
      <>
        {s.map((item, idx) => {
          return (
            <div key={idx} className="weibo-skeleton">
              <Skeleton
                avatar
                title
                row={5}
                round={false}
                rowHeight={10}
                rowWidth={['100%', '100%', '100%']}
              />
              <footer className="f-footer-ctrl">
                <div className="m-diy-btn m-box-center-a">
                  <Exchange className="lite-iconf lite-iconf-report" />
                  <h4>转发</h4>
                </div>
                <div className="m-diy-btn m-box-center-a">
                  <ChatO className="lite-iconf lite-iconf-comments" />
                  <h4>评论</h4>
                </div>
                <div className="m-diy-btn m-box-center-a">
                  <GoodJobO className="lite-iconf lite-iconf-like" />
                  <h4>赞</h4>
                </div>
                <aside onClick={() => cardShow(idx)}>
                  <Ellipsis />
                </aside>
              </footer>
            </div>
          )
        })}
      </>
    )
  }

  useEffect(() => {
    Promise.all([getList(), getHome()])
      .then(res => {
        setSkeleton(skeleton => {
          skeleton = false
        })
      })
      .catch(err => {
        setErr(errload => {
          errload = true
        })
      })
  }, [])

  return (
    <>
      {skeleton ? (
        wbSkeleton()
      ) : (
        <div className="wb-main">
          {errload ? (
            <div className="empty_failed">
              <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="m86.9 49c4.1 0 7.5 1.1 9.9 3.5 4.1 4 4.5 11 1.9 19.3-.6 2 .2 2.5 1.3 2.5 1.2 0 2.7-.6 2.7-.6 0 0 0 0 0 0 8.6-3.5 16.6-5.4 23.2-5.4 6.5 0 11.5 1.8 14.2 5.6 2.9 4.1 2.6 9.8 0 16.5-1.2 3.1.4 3.5 2.7 4.2 9.6 2.9 20.3 10.1 20.3 22.6 0 20.7-30.3 46.9-75.8 46.9-34.8-.1-70.3-16.7-70.3-44.1 0-14.3 9.2-30.8 25-46.4 15.6-15.4 33.1-24.6 44.9-24.6m0-2c-12.7 0-30.9 9.9-46.4 25.2-16.4 16.3-25.5 33.3-25.5 47.8 0 28.8 36.7 46 72.2 46 21.2 0 41.1-5.7 56.1-16 13.6-9.3 21.7-21.6 21.7-32.9 0-16.6-16.6-22.9-21.7-24.5-.6-.2-1.4-.4-1.7-.6 0-.1.1-.4.3-1 3.1-7.7 3-13.9-.2-18.4-3-4.2-8.5-6.5-15.8-6.5-6.8 0-15.1 1.9-23.9 5.5h-.1c-.5.2-.9.3-1.2.4 2.9-9.4 2.1-16.7-2.4-21.2-2.8-2.5-6.6-3.8-11.4-3.8z"
                  fill="#d2d2d2"
                ></path>
                <path
                  d="m131.7 46.2c9.6-.8 19 1.8 25.9 8.9 6.3 6.5 8.9 15.3 8.4 24.2.7.2 1.3.3 2 .5.6-9.6-2.2-19.1-9-26.1-7.4-7.6-17.7-10.4-27.9-9.4.2.6.4 1.2.6 1.9z"
                  fill="#fbb285"
                ></path>
                <path
                  d="m131 16.3c17.4-1.3 34.9 4.1 47.7 17.2 12 12.4 17.1 28.8 16.2 45.3.7.2 1.3.4 2 .7 1-17.2-4.2-34.5-16.8-47.4-13.3-13.7-31.6-19.3-49.8-17.8.2.7.4 1.3.7 2z"
                  fill="#fbb285"
                ></path>
              </svg>
              <p>网络异常，稍后请刷新重试~</p>
            </div>
          ) : (
            <KeepAlive when={true} saveScrollPosition="screen">
              <NavTop table={tab} />
              <Card cards={cards} />
            </KeepAlive>
          )}
        </div>
      )}
    </>
  )
}

export default Index
